<template>
  <div class="home">
    <el-carousel :interval="2000" height="400px" type="card">
      <el-carousel-item v-for="item in imgList" :key="item">
        <!--                <h3 class="medium">{{ item }}</h3>-->
        <img :src="item.view" alt="" style="width: 100%;height: 100%;object-fit: scale-down; ">
      </el-carousel-item>
    </el-carousel>
    <div>

      <el-dialog :visible.sync="topicDialogFormVisible">
        <div id="myText1"></div>
        <div slot="footer" class="dialog-footer">
          <el-button icon="el-icon-error" plain type="danger" @click="topicDialogFormVisible = false">取 消</el-button>
          <el-button icon="el-icon-success" type="success" @click="saveTopicText">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog :visible.sync="contentDialogFormVisible">
        <div id="myText2"></div>
        <div slot="footer" class="dialog-footer">
          <el-button icon="el-icon-error" plain type="danger" @click="contentDialogFormVisible = false">取 消</el-button>
          <el-button icon="el-icon-success" type="success" @click="saveContentText">确 定</el-button>
        </div>
      </el-dialog>


      <el-dialog :before-close="handleClose" :visible.sync="dialogVisible" title="提示" width="30%">
        <span>请选择</span>
        <span slot="footer" class="dialog-footer">
                            <el-button type="danger" @click="goTopic">修改标题</el-button>
                            <el-button type="primary" @click="goContent">修改正文</el-button>
                          </span>
      </el-dialog>
      <!--      关于本学期校级任选课相关事宜安排的通知-->
      <div style="text-align: center;" v-html="send.title"></div>

      <div>
        <div class="passage" style="float: left;width: 900px;margin-left: 10px">

          <!--          <el-input v-model="myhtml"></el-input>-->
          <!--          <pre>{{message}}</pre>-->
          <div style="margin-top: 50px" v-html="send.context"></div>

          <!--          <p>各学院及相关单位：-->
          <!--            根据学校教学安排，本学期全校任选课定于6月20日（星期五）正式开课，选课工作将从6月16日开始。现将有关事项通知如下：</p>-->
          <!--          一、选课时间：6月16日&#45;&#45;6月20日 <br><br>-->
          <!--          二、学生登录选课信息管理系统后进入学生选课进行选课。学生选课前请认真阅读选课公告，再进行“网上选课”。<br><br>-->
          <!--          三、教师可登陆选课信息管理系统后进入选课管理增删课程，6月15日14：00之后各位教师及学生登录教务处网站查询自己申报的课程是否停开。<br><br>-->
          <!--          四、选课退课均须在选课时间内完成，选课结束后不再进行补退选，请学生注意选课时间。<br><br>-->
          <!--          五、请各学院通知并组织学生进行选课，同时请各学院及相关单位通知任课教师按时上课。教务处将组织相关人员对上课情况进行不定期的检查。<br><br>-->
          <!--          <div style="float: right">2020-07-16</div>-->
          <br>
        </div>

        <div class="goto" style="float: right;margin-top: 50px">
          <el-calendar v-model="value" style="width: 600px">
          </el-calendar>
        </div>

      </div>

    </div>

    <!--   <div style="width: 100px;height: 100px;z-index: 100;position: fixed; background-color: red;"></div>-->
    <el-backtop v-if="user.roleId==3" :visibility-height="150"
                style="width: 200px;height: 200px; background-color: rgba(0,0,0,0.1);color: deepskyblue;font-weight: bold"
                @click="openChooseEditText">
      编辑公告
    </el-backtop>
  </div>
</template>

<script>
import E from 'wangeditor';
import request from '@/utils/request';

let editor1;
let editor2;
// 或者 const editor = new E( document.getElementById('div1') )
// editor.config.height = 500
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      imgList: [
        {view: require("@/assets/img/light1.jpg")},
        {view: require("@/assets/img/light2.jpg")},
        {view: require("@/assets/img/light3.jpg")},
      ],
      dialogVisible: false,
      contentDialogFormVisible: false,
      topicDialogFormVisible: false,
      // message:"各学院及<h1>相关</h1>单位",
      // myhtml:'<h1>司丹茵暴富</h1>\n <span style="color: red">司丹茵暴瘦</span>',
      send: {
        // title: '<h1 >文字加载中<i class="el-icon-loading"></i></h1>',
        title: '<h1><h1><font color="#ff0000"  size="4">文字加载中<i class="el-icon-loading"></i></font></h1></h1>',
        context: '<h2 style="margin-top: 100px;margin-left: 200px">文字加载中<i class="el-icon-loading"></i></h2>',
        id: 1,
      },
      value: new Date(),
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
  },
  created() {
    //请求标题文字
    request.get("/home/getall").then(response => {
      if (response.flag) {
        // console.log( response.data[0].title)
        this.send.title = response.data[0].title
        this.send.context = response.data[0].context
      }
    })

  },
  methods: {
    openChooseEditText() {
      this.dialogVisible = true
    },
    saveContentText() {
      this.contentDialogFormVisible = false
      const content = editor2.txt.html()
      console.log(content)
      this.send.context = content
      request.put("/home/savetitle", this.send).then(response => {
        if (response.data.flag) {
          {
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            });

          }
        }
      })
      this.contentDialogFormVisible = false
    },
    saveTopicText() {
      this.topicDialogFormVisible = false
      const title = editor1.txt.html()
      console.log(title)
      this.send.title = title
      request.put("/home/savetitle", this.send).then(response => {
        console.log(this.send)
        if (response.data.flag) {
          {
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            });

          }
        }
      })
      this.topicDialogFormVisible = false
    },
    goTopic() {

      this.topicDialogFormVisible = true
      this.dialogVisible = false
      this.$nextTick(() => {
        editor1 = new E('#myText1')
        editor1.config.fontSizes = {
          'x-small': {name: '30px', value: '1'},
          'small': {name: '40px', value: '2'},
          'normal': {name: '50px', value: '3'},
          'large': {name: '60px', value: '4'},
          'x-large': {name: '70px', value: '5'},
          'xx-large': {name: '80px', value: '6'},
          'xxx-large': {name: '90px', value: '7'},
        }
        editor1.config.colors = [
          '#000000',
          '#ff0000',
          '#22ec25',
          '#e74cee',
          '#008ef1',
          '#c2ea2e'
        ]
        editor1.create()
        editor1.txt.html(this.send.title)

      })
    },
    goContent() {
      this.contentDialogFormVisible = true
      this.dialogVisible = false
      this.$nextTick(() => {
        editor2 = new E('#myText2')
        editor2.config.colors = [
          '#000000',
          '#ff0000',
          '#22ec25',
          '#e74cee',
          '#008ef1',
          '#c2ea2e',
        ]
        editor2.create()
        editor2.txt.html(this.send.context)

      })
    }
  }
}
</script>

<style>
.passage {
  font-size: 20px;
}

font[size="7"] {
  font-size: 90px;
}

font[size="6"] {
  font-size: 80px;
}

font[size="5"] {
  font-size: 70px;
}

font[size="4"] {
  font-size: 60px;
}

font[size="3"] {
  font-size: 50px;
}

font[size="2"] {
  font-size: 40px;
}

font[size="1"] {
  font-size: 30px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 400px;
  margin: 0;
}

/*.el-carousel__item:nth-child(2n) {*/
/*  object-fit: scale-down;*/
/*  background-image: url("../assets/img/light1.jpg");*/
/*  width: 100%;*/
/*  height: 100%;*/

/*}*/

/*.el-carousel__item:nth-child(2n+1) {*/
/*    background-image: url("../assets/img/light2.jpg");*/
/*}*/

/*.el-carousel__item:nth-child(2n+3) {*/
/*    background-image: url("../assets/img/light3.jpg");*/
/*}*/
</style>
